<template>
  <text>{{ getRealVal }}</text>
</template>
<script setup>
import { computed, toRaw } from "vue";
import useSetDynmicSelectOptions from "@gd-accbuild-ui/dimension-ui/dimension-item-content/components/useFromDynmicConfig/useFromOptionsConfig";
import { cloneDeep } from "@gd-accbuild-core/config/utils";
const props = defineProps({
  metaItem: {
    type: Object,
    required: true,
  },
  metaItemList: {
    type: Array,
  },
  commonAttr: {
    type: Object,
    default: () => ({}),
  },
  itemSubmitConfig: {
    type: Object,
    default: () => ({
      submitStyle: "Manual",
      allowAutoSubmit: false,
    }),
  },
  metaDynmicConfig: {
    type: Object,
  },
  vmTemplateConfig: {
    type: Object,
  },
  //表格专用 开始
  rowIdx: {
    type: [Number, Object],
    default: () => null,
  },
  colIdx: {
    type: [Number, Object],
    default: () => null,
  },
  tableRowIndex: {
    type: [Number, Object],
    default: () => null,
  },
  tableColumnIndex: {
    type: [Number, Object],
    default: () => null,
  },
  rowData: {
    type: Object,
    default: () => null,
  },
  tableBodyData: {
    type: Object,
    default: () => null,
  },
  //表格专用 结束
  //表单专用 开始
  formData: {
    type: Object,
    default: () => null,
  },
  //表单专用 结束
});

useSetDynmicSelectOptions(props);

const getFormatterFunc = () => {
  if (typeof formatterVal === "string") {
    return new Function("configObj", formatterVal);
  } else if (typeof formatterVal === "function") {
    return formatterVal;
  } else {
    return ({
      rowIdx,
      colIdx,
      $rowIdx,
      $coldx,
      metaKey,
      metaItem,
      metaItemList,
      rowData,
      formData,
      tableBodyData,
    }) => {
      //return props.rowData[props.metaItem.key];
      let realVal = "";
      if (!metaItem.searchKey) {
        realVal = rowData[metaItem.key];
      } else {
        let retVal = cloneDeep(toRaw(rowData));
        const searchKeySplits = metaItem.searchKey.split(".");
        if (searchKeySplits.includes('$')) {
          //TODO: 被动引用时,是个数组
        } else {
          searchKeySplits.forEach((el) => {
            if (retVal.hasOwnProperty(el)) {
              retVal = retVal[el];
            }
          });
        }
        realVal = retVal;
      }
      return realVal;
    };
  }
};
/**
 * 带searchKey的使用对应的值
 * //TODO:FIXME: 暂且只支持一层子表
 */
const getRealVal = computed(() => {
  const hasOptions =
    props.metaItem.isMappingToOptionsLabel &&
    Array.isArray(props.metaItem.options) &&
    props.metaItem.options.length > 0;
  const formatterVal = props.metaItem?.formatterFunc;
  if ((!["string", "function"].includes(typeof formatterVal) || !formatterVal) && hasOptions) {
    let realVal = "";
    if (!props.metaItem.searchKey) {
      realVal = props.rowData[props.metaItem.key];
    } else {
      let retVal = cloneDeep(props.rowData);
      props.metaItem.searchKey.split(".").forEach((el) => {
        if (el === "$") {
          retVal = retVal.map((v) => {
            return v[el];
          });
        } else {
          retVal = retVal[el];
        }
      });
      realVal = retVal;
    }
    const matchedMapingOpt = props.metaItem.options.find(
      (el) => el.value === realVal
    );
    return matchedMapingOpt ? matchedMapingOpt.label : realVal;
  }
  return getFormatterFunc()({
    rowIdx: props.rowIdx,
    colIdx: props.colIdx,
    $rowIdx: props.tableRowIndex,
    $coldx: props.tableColumnIndex,
    metaKey: props.metaItem.key,
    metaItem: props.metaItem,
    metaItemList: props.metaItemList,
    rowData: props.rowData,
    formData: null,
    tableBodyData: props.tableBodyData,
  });
});
</script>
